<template>
    <div class="container">
        <a-card style="width: 100%;height: 45%;" title="个人信息">
            <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
                @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
                <a-form-item has-feedback label="账号">
                    <a-input v-model:value="formState.username" type="text" autocomplete="off" disabled />
                </a-form-item>
                <a-form-item has-feedback label="昵称">
                    <a-input v-model:value="formState.user_name" type="text" autocomplete="off" />
                </a-form-item>
                <!-- <a-form-item has-feedback label="角色" name="role">
                    <a-input v-model:value="formState.role" type="text" autocomplete="off" />
                </a-form-item> -->
                <a-form-item has-feedback label="邮箱">
                    <a-input v-model:value="formState.email" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="手机号">
                    <a-input v-model:value="formState.mobile" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">保存</a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-card style="width: 100%;height: 30%;margin-top: 20px;" title="修改密码">
            <a-form v-bind="layout" @finish="handleFinish" @finishFailed="handleFinishFailed">
                <a-form-item has-feedback label="密码">
                    <a-input value="1111111111111" type="password" autocomplete="off" disabled />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit" @click="router.push({ name: 'passwordEdit' })">修改</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script>
export default {
    name: "userEdit",
};
</script>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { updateUserCenterInfo, getUserCenterInfo } from '@api/user.js'
import { reactive, ref, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue';
import { useStore } from "vuex";
const { state } = useStore()
const router = useRouter();
const route = useRoute();
const userId = ref(router.currentRoute.value.query.id)
const formRef = ref()
const formState = reactive({
    username: '',
    user_name: '',
    email: '',
    mobile: '',
    role: '',
});
let validate = async (_rule, value) => {
    if (value === '') {
        return Promise.reject('必填项');
    }
};
// 非空验证
const rules = {
    // password: [
    //     {
    //         required: true,
    //         validator: validate,
    //         trigger: 'change',
    //     }
    // ],
    // role: [
    //     {
    //         required: true,
    //         validator: validate,
    //         trigger: 'change',
    //     }
    // ],
};
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 14,
    },
};
const handleFinish = values => {
    updateUserCenterInfo({ user_name: formState.user_name, mobile: formState.mobile, email: formState.email })
        .then(res => {
            message.success('修改成功');
            router.push({ name: state.url })
        })
        .catch(err => {
            console.log(err)
            if (err.response.data.hasOwnProperty('email')) {
                message.error('邮箱格式不正确')
            } else if (err.response.data.hasOwnProperty('mobile')) {
                message.error('手机格式不正确')
            }
        })
};
const handleFinishFailed = errors => {
    console.log(errors, '---------');
};
onMounted(() => {
    getUserCenterInfo().then(res => {
        formState.username = res.data.username
        formState.user_name = res.data.user_name
        formState.password = res.data.password
        formState.email = res.data.email
        formState.mobile = res.data.mobile
        formState.role = res.data.role
    })
})
</script>

<style lang="less" scoped>
.container {
    height: calc(100vh - 85px);
    padding: 20px;

    ::v-deep .ant-card-body {
        width: 1000px;
    }

    ::v-deep .ant-card-head {
        background-color: #cfcfd1;
    }

    ::v-deep .ant-card-head-title {
        font-weight: bold;
    }
}
</style>